import "./index.scss"
import {useState} from "react";
import Modal from "../../../components/modal";

const data = [
  {
    name: "TomTomTomTomTomTomTomTomTomTomTom",
    avatar: `https://randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "TomTomTomTomTomTomTomTomTomTomTom",
    avatar: `https://randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "JerryJerryJerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.ceil(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.ceil(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
  {
    name: "Jerry",
    avatar: `https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`,
    value: Math.floor(Math.random() * 100000),
    level: Math.floor(Math.random() * 50),
    day: Math.floor(Math.random() * 100000)
  },
]

// 成员榜
export default function MemberList() {
  const [hasJoin, setHasJoin] = useState(false)
  const [visible, setVisible] = useState(false)

  return (
    <div className="MemberList">

      <div className="total">
        Audience: 1000
      </div>

      <button className="info-btn" onClick={setVisible.bind(null, true)}/>

      <ul className="member-list">
        {data.map(({name, avatar, value, level, day}, index) => (
          <li key={index} className="member-list-item">
            <div className="rank">{index + 1}</div>

            <div className="avatar">
              <img src={avatar} alt=""/>
            </div>
            <div>
              <p className="name">{name}</p>
              <p className="value">{value}</p>
            </div>

            <div className="level-text">
              <div className="level-wrap">
                <div className={`level level-${Math.ceil(level / 10)}`}>
                  {level}
                </div>
                <div className="text">
                  RABOFANS
                </div>
              </div>

              <p className="info">
                Accompanied for {day} days
              </p>
            </div>
          </li>
        ))}
      </ul>

      <footer className="footer">
        {
          hasJoin ? (
            <div className="member-list-item">
              <div className="rank">{10}</div>

              <div className="avatar">
                <img src={`https://randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
              </div>
              <div>
                <p className="name">name</p>
                <p className="value">58620</p>
              </div>

              <div className="level-text">
                <div className="level-wrap">
                  <div className={`level level-${Math.ceil(Math.random() * 50 / 10)}`}>
                    {Math.ceil(Math.random() * 50)}
                  </div>
                  <div className="text">
                    RABOFANS
                  </div>
                </div>

                <p className="info">
                  Accompanied for 365 days
                </p>
              </div>
            </div>
          ) : (
            <div className="join-wrap">
              <p className="join-text">You Bellum joins this host fan club</p>
              <button className="join-btn" onClick={setHasJoin.bind(null, !hasJoin)}>join</button>
            </div>
          )
        }
      </footer>

      <Modal visible={visible} onClose={setVisible.bind(null, false)} className="info-modal">
        <h3>
          members of the mainna
        </h3>
        <p>
          This rating is the intimacy relationship between the host and the member. join fans club this host will lgsg
          bs be in his rank completing daily tasks will make the value of your intimacy and rank higher.
        </p>
      </Modal>
    </div>
  )
}
